    <template>
        <div class="app-container">
    
        <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
            <el-form-item label="标题："  prop="title" required>
            <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="内容：" prop="messageContent" required>
            <el-input type="textarea" rows="13"  v-model="form.messageContent"></el-input>
            </el-form-item>

            <el-form-item label="接收人：">
            <el-select v-model="form.receiveUserIds" multiple filterable remote reserve-keyword
                v-show="!checkFlag"
                placeholder="请输入用户名"
                :remote-method="getUserByUserName"
                :loading="selectLoading">
                <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.id"/>
            </el-select>
            <template>
                <el-checkbox :label="checkFlag" @change="changeFlag" style="margin-left:30px">全体用户</el-checkbox>
            </template>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm">发送</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="close">关闭</el-button>
            </el-form-item>
        </el-form>
        </div>
    </template>
    <script>
    import {sendMsg} from '@/api/message/message'
    import {getUserByUserName} from '@/api/user/student'
    export default {
        name:'messageSend',
        data () {
        return {
            form: {
            title: '',
            messageContent: '',
            receiveUserIds: [],
            },
            formLoading: false,
            selectLoading: false,
            options: [],
            checkFlag: false,
            rules: {
            title: [
                { required: true, message: '请输入消息标题', trigger: 'blur' }
            ],
            messageContent: [
                { required: true, message: '请输入消息内容', trigger: 'blur' }
            ],
            }
        }
        },
        methods: {
        // 查询用户信息
        getUserByUserName (query) {
            if(query.trim() !== ''){
                this.formLoading = true;
                getUserByUserName(query).then(resp=>{
                    this.options = resp.data;
                    this.formLoading = false;
                })
            }else{
                this.options = [];
            }

        },
        submitForm () {
            console.log(this.checkFlag,this.form.receiveUserIds.length);
            if(!this.checkFlag && this.form.receiveUserIds.length <= 0){
                this.$message({
                    message:'请选择发送人',
                    type: 'error'
                })
                return "";
            }
            
            sendMsg(this.form).then(resp=>{
                if(resp.code == 200){
                    this.$message({
                        type: 'success',
                        message: resp.message
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: resp.message
                    })
                }
                this.resetForm();
            }).catch(error=>{})
        },
        resetForm () {
            let lastId = this.form.id
            this.$refs['form'].resetFields()
            this.form = {
            title: '',
            content: '',
            receiveUserIds: []
            }
            this.form.id = lastId
        },

        close(){
            this.$router.push("/message/index")
        },
        changeFlag(){
            this.checkFlag = !this.checkFlag;
            console.log(this.checkFlag);
        }
        }
    }
    </script>
    